<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="财务类型">
                        <el-select  placeholder="请选择财务类型"   filterable  v-model="selectfrom.FinanceType">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option :value="1" label="借款"></el-option>
                            <el-option :value="4" label="报销"></el-option>
                            <el-option :value="16" label="收款"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select  placeholder="请选择部门" filterable v-model="selectfrom.Department">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目">
                        <el-select  placeholder="请选择项目" filterable  v-model="selectfrom.Project">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目类型">
                        <el-select  placeholder="请选择项目类型" filterable v-model="selectfrom.ProjectType">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option :value="1" label="施工生产"></el-option>
                            <el-option :value="2" label="产品生产"></el-option>
                            <el-option :value="4" label="产品研发"></el-option>
                            <el-option :value="8" label="技术服务"></el-option>
                            <el-option :value="16" label="其它"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                       <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司财务汇总表</el-col>
                    <el-col>
                        <el-table id="wrapperFinanceDetailReport" :data="tableData"  border  show-summary >
                            <el-table-column label="序号" align="center" show-overflow-tooltip type="index" width="50"></el-table-column>
                            <el-table-column label="编号" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.Number }}
                                </template>
                            </el-table-column>
                            <el-table-column label="部门" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ GetDepartmentName(slot.row.Department) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="项目" align="center" width="380">
                                <template slot-scope="slot">
                                    {{ GetProjectName(slot.row.Project) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="项目类型" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                   {{ GetProjectTypeName(slot.row.Project) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="支付对象" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ GetPayeeName(slot.row) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="类别" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{slot.row.FinanceType}}
                                    <!--<label v-if="slot.row.FinanceType==1">个人借款</label>
                                    <label v-if="slot.row.FinanceType==2">支付申请</label>
                                    <label v-if="slot.row.FinanceType==4">常规报销</label>
                                    <label v-if="slot.row.FinanceType==8">差旅报销</label>
                                    <label v-if="slot.row.FinanceType==16">收款</label>-->
                                </template>
                            </el-table-column>
                            <el-table-column label="收入（元）" align="center" show-overflow-tooltip prop="CollectMoney"></el-table-column>
                            <el-table-column label="报销（元）" align="center" show-overflow-tooltip prop="ResMoney"></el-table-column>
                            <el-table-column label="差额（元）" align="center" show-overflow-tooltip prop="DifferenceMoney"></el-table-column>
                            <el-table-column label="借款（元）" align="center" show-overflow-tooltip prop="LoanMoney"></el-table-column>
                            <el-table-column label="成本合计（元）" align="center" show-overflow-tooltip prop="ApprovalMoney"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="项目报表" name="3">
                <el-row class="divstyle">
                    <div id="myChart" style="width: 50%;height: 500px"></div>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import Echatrs from 'echarts'
    import * as publicjs from "../../../../public/Scriput/Public";

    export default {
        name: "FinanceDetailReport",
        props: {
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllCustomer: {
                type: Array,
                required: true
            }
        },
        created() {
            this.InitDate();
            this.formdata();
            publicjs.setecharts(Echatrs);
        },
        data() {
            return {
                activeNames: ['1', '2', '3'],
                selectfrom: {
                    FinanceType: 0,
                    Department: 0,
                    Project: 0,
                    ProjectType: 0,
                    Start: '',
                    End: '',
                },
                tableData: [],
                wrapper: {
                    width: "100%",
                    height: "100%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperFinanceDetailReport",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司财务汇总表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11) 
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11) 
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate; 
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
             var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetFinanceDetailReportData', {
                    from: this.selectfrom
                }).then(res => {
                    loadding.close();
                    this.tableData = res.data
                    this.InitEchart(this.tableData)
                })
            },
            //获取对应部门名字
            GetDepartmentName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllDepartment.length; i++) {
                        if (this.AllDepartment[i].Id == value) {
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            GetPayeeName(obj) {
                let name = ''
                if (obj.PayeeType == '1') {
                    for (let i = 0; i < this.AllCustomer.length; i++) {
                        if (this.AllCustomer[i].Id == obj.Payee) {
                            name = this.AllCustomer[i].CustomerName
                            return name
                        }
                    }
                } else if (obj.PayeeType == '2') {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == obj.Payee) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            GetProjectTypeName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            switch (this.AllProject[i].ProjectType) {
                                case 1:
                                    name = '施工生产'
                                    break;
                                case 2:
                                    name = '产品生产'
                                    break;
                                case 4:
                                    name = '产品研发'
                                    break;
                                case 8:
                                    name = '技术服务'
                                    break;
                                case 16:
                                    name = '其他'
                                    break;
                            }
                        }
                    }
                }
                return name
            },
            // echarts表格加载
            InitEchart(data) {
                data.forEach(d => {
                    if (d.FinanceType == 1) {
                        d.FinanceType = "个人借款"
                        d.Money = d.ApprovalMoney
                    }
                    else if (d.FinanceType == 2) {
                        d.FinanceType = "支付申请"
                        d.Money = d.ApprovalMoney
                    }
                    else if (d.FinanceType == 4) {
                        d.FinanceType = "常规报销"
                        d.Money = d.ApprovalMoney
                    }
                    else if (d.FinanceType == 8) {
                        d.FinanceType = "差旅报销"
                        d.Money = d.ApprovalMoney
                    }
                    else if (d.FinanceType == 16) {
                        d.FinanceType = "收款"
                        d.Money = d.CollectMoney
                    }
                })
                var noRepeatDepartData = publicjs.DataGroupBy(JSON.stringify(data), "FinanceType", "Money");
                var new_Name = noRepeatDepartData.map(obj => { return obj.FinanceType; });
                var new_Data = noRepeatDepartData.map(obj => { return { name: obj.FinanceType, value: obj.Money }; });
                publicjs.InitEchartPie('myChart', "收入、借款、报销占比", "单位：人民币（元）", new_Name, "收入、借款、报销占比", new_Data)
            }
        },
    }
</script>

<style scoped>

</style>
